<template>
    <view class="content">
        <image src="../../static/image/us_bg.png" class="us-bg"></image>
		<view class="wrapper">
			<view class="info">
				<image :src="info.image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
				<view class="u-flex-1">
					<view class="name">{{info.nickname || '用户名内容'}}</view>
					<view class="tel" v-if="info.mobile">{{info.mobile}}</view>
				</view>
				<view class="info-btn" @click="toPage(`/pages/info/info`)">会员信息</view>
			</view>
			
			<view class="buy-card" @click="toPay">购买健康卡+</view>
			
			<view class="s-box" v-if="list && list.length > 0">
				<uScrollList indicatorColor="#e3e2e2" indicatorActiveColor="#00d3d3">
				    <view class="box" v-for="(item, index) in list" :key="index" @click="$gTo(`/pages/vip/card?card_id=${item.id}`)">
				    	<view class="c-item" :class="{active : item.status == 0}">
				    		<view class="top">
				    			<view class="sta" :class="{activeSta : item.status == 0}" @click.stop="$gTo(`/pages/vip/buy?card_id=${item.id}`)">立即续费</view>
				    		</view>
				    		<!-- status=0未绑定  1已绑定 2已预约 -->
				    		<view class="cen" :class="{activeCen : item.status == 0}">
				    			<view class="c-name">{{ item.status == 0 ? '未绑定用户' : item.nickname }}</view>
				    			<view class="num">NO.{{item.card_no}}</view>
				    		</view>
				    		<view class="c-down">
				    			<view class="u-flex-1">
				    				<view class="title">一诺健康管理卡</view>
				    				<view class="sy">剩余体检次数:{{item.exam_nums}}次</view>
				    				<view class="time">有效期至{{item.end_time}}</view>
				    			</view>
				    			<image src="../../static/image/card_2.png" class="card-1" v-if="item.status == 0"></image>
				    			<image src="../../static/image/card_1.png" class="card-1" v-else></image>
				    		</view>
							
							<view class="btns">
								<view class="btn2" v-if="item.status == 0" @click.stop="$gTo(`/pages/vip/share?card_id=${item.id}`)">转赠</view>
								<view class="btn1" v-if="item.status == 0" @click.stop="$gTo(`/pages/vip/card?card_id=${item.id}`)">立即绑定</view>
								<view class="btn1" v-if="item.status == 1 && item.exam_nums > 0" 
									@click.stop="$cTo(`/pages/medical/list?card_id=${item.id}`)">立即预约</view>
							</view>
				    	</view>
				    </view>
				</uScrollList>
			</view>
			
			<!-- 健康卡管理 -->
			<!-- <image src="../../static/image/us_1.png" class="us-1"
				@click="toPage(`/pages/vip/list`)"></image> -->
			<view class="card-num" v-if="list && list.length > 0">
				<u-icon name="coupon" color="#a1a1a1" size="36" class="u-m-r-10"></u-icon>
				<view>
					您有<text>{{list.length}}</text>张健康卡，<text @click="toPage(`/pages/vip/list`)">点击前往</text>
				</view>
			</view>
			
			<!-- 极速问诊、预约体检记录 -->
			<view class="nav">
				<image src="../../static/image/us_2.png" class="us-2" @click="openPage()"></image>
				<image src="../../static/image/us_3.png" class="us-2"
					@click="toPage(`/pages/checkup/list`)"></image>
			</view>
			
			<view class="down">
				<view class="item" @click="openPage(`/pages/report/list`)">
					<image src="../../static/image/us_6.png" class="us-6"></image>
					<view>报告解读</view>
				</view>
				<view class="item" @click="toPage(`/pages/other/guahao`)">
					<image src="../../static/image/us_7.png" class="us-6"></image>
					<view>我的挂号</view>
				</view>
				<view class="item" @click="toPage(`/pages/vip/give`)">
					<image src="../../static/image/us_8.png" class="us-6"></image>
					<view>转赠记录</view>
				</view>
				<view class="item" @click="toPage(`/pages/vip/activation`)">
					<image src="../../static/image/us_9.png" class="us-6"></image>
					<view>激活码开卡</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<u-tabbar v-model="current" :list="tab_list" inactive-color="#5d5f6a" active-color="#00b6bc" 
			:border-top="false" zIndex="999" @change="tabbarChange"></u-tabbar>
		
		<!-- 问诊须知 -->
		<u-mask :show="show_1" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box2">
					<image src="../../static/image/pop_bg.png" class="pop-bg"></image>
		            <view class="pop-up">
		                <view class="pop-tit">{{content.title}}</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									<u-parse :html="content.content"></u-parse>
								</view>
							</scroll-view>
						</view>
						<view class="pop-btns">
							<view class="pop-b-l" @click="show_1 = false">取消</view>
							<view class="pop-b-r" @click="keepConsult">继续咨询</view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show_1 = false"></image>
		        </view>
		    </view>
		</u-mask>
		
		<!-- 极速问诊 -->
		<u-mask :show="show_2" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
					<image src="../../static/image/jswz.png" class="jswz"></image>
		            <view class="pop-up2">
		                <view class="pop-tit">此功能限一诺健康管理卡会员使用</view>
						<view class="pop-btns">
							<view class="pop-b-l" @click="show_2 = false">取消</view>
							<view class="pop-b-r" @click="toPay">立即购买</view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show_2 = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
	import uScrollList from '@/uni_modules/uv-scroll-list/components/uv-scroll-list/uv-scroll-list.vue';
    export default {
		components: {
		    uScrollList
		},
        data() {
            return {
                info: {},
				show_1: false,
				show_2: false,
				content: {},
				current: 0, //底部导航索引
				tab_list: [{
						iconPath: "/static/icon/tab_2.png",
						selectedIconPath: "/static/icon/tab_1.png",
						text: '健康管理',
						customIcon: false,
						pagePath: "/pages/tabbar/index"
					},
					{
						iconPath: "/static/icon/tab_4.png",
						selectedIconPath: "/static/icon/tab_3.png",
						text: '客服',
						customIcon: false,
						pagePath: "/pages/tabbar/kefu"
					},
					{
						iconPath: "/static/icon/tab_6.png",
						selectedIconPath: "/static/icon/tab_5.png",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/tabbar/mine"
					},
				],
				list: [],
            };
        },
        onLoad() {
            this.getContent()
        },
		onShow() {
			if (this.$getSync('userToken')) {
				this.getInfo()
				this.getList()
			}
		},
        methods: {
			toPay() {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/loginH`)
				} else {
					this.$gTo(`/pages/settle/settle`)
				}
			},
			
			// 获取健康卡
			getList() {
				this.$ajax('get_cards', {
			        userToken: this.$getSync('userToken'),
					type: 0,//0-个人中心 1-体检预约
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			//切换底部导航
			tabbarChange(e) {
				this.current = e;
			},
			
			toPage(url) {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/loginH`)
				} else {
					this.$gTo(url)
				}
			},
			
			
			// 极速问诊、报告问诊
			openPage(url) {
				if (!this.$getSync('userToken')) {
					this.$gTo(`/pages/login/loginH`)
					
				} else if (!this.$getSync('MOBILE')) {
					this.$confirm('请先绑定手机号', data => {
						this.$gTo(`/pages/login/binephone`)
					})
				} else {
					if (url) {
						this.$gTo(url)
					} else {
						this.doConsult()
					}
				}
			},
			
			// 极速问诊
			doConsult() {
				this.$ajax('is_inquirys', {
				    userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
				        this.show_1 = true
					} else {
						this.$toast(ret.message);
						this.show_2 = true
					}
				});
			},
			
			// 继续咨询
			keepConsult() {
				this.$ajax('add_inquirys', {
				    userToken: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.status == 0) {
				        this.show_1 = false
						window.location.href = 'https://work.weixin.qq.com/kfid/kfc7b92dee1aa6e7fe5';
						// this.$gTo(`/pages/pay/web`)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getInfo() {
				this.$ajax('members', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.info = ret.data
						this.$setSync('MOBILE', ret.data.mobile);
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getContent() {
				this.$ajax('get_content', {
			        type: 7,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.card-num{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #a1a1a1;
	}
	.card-num>view>text{
		color: #01b8bd;
	}
	
	
	.buy-card{
		font-size: 28rpx;
		padding-bottom: 30rpx;
		color: #01b8bd;
		text-align: right;
	}
	.s-box{
		width: 100%;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}
	.box{
		margin-right: 30rpx;
	}
	.c-item{
		width: 600rpx;
		height: 350rpx;
		border-radius: 15rpx;
		padding-left: 40rpx;
		padding-bottom: 30rpx;
		background: linear-gradient(125deg,#fff4e1,#ecc48a,#eec084);
		color: #843d12;
	}
	.active{
		background: linear-gradient(125deg,#eef2f6,#d0d6de,#bfc8d2);
		color: #515c70;
	}
	.top{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.sta{
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 20rpx;
		background: linear-gradient(to right,#e1a561,#d4873a);
		border-radius: 0 15rpx 0 20rpx;
	}
	.activeSta{
		background: linear-gradient(to right,#a3adbb,#8994a9);
	}
	.cen{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-right: 40rpx;
		// padding-top: 4rpx;
		padding-bottom: 14rpx;
		border-bottom: 2rpx solid #a56c33;
	}
	.activeCen{
		border-bottom: 2rpx solid #7f8da7;
	}
	.c-name{
		flex: 1;
		font-size: 34rpx;
		padding-right: 20rpx;
	}
	.num{
		font-size: 30rpx;
		font-weight: bold;
	}
	.c-down{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10rpx;
		padding-right: 20rpx;
	}
	.title{
		font-size: 40rpx;
		font-weight: bold;
	}
	.sy{
		font-size: 30rpx;
	}
	.time{
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 24rpx;
	}
	.card-1{
		width: 130rpx;
		height: 130rpx;
	}
	.btns{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 10rpx 20rpx;
	}
	.btns>view{
		width: 150rpx;
		height: 54rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 54rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
	}
	.btn1{
		color: #5c667b;
		background-color: #fff;
	}
	.btn2{
		color: #fff;
		background-color: #5c667b;
		// border: 2rpx solid #5c667b;
	}
	
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 616rpx;
		height: 670rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-bg{
		width: 616rpx;
		height: 293rpx;
	}
	.pop-up {
	    width: 616rpx;
		height: 670rpx;
	    padding: 50rpx 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.pop-up2{
		width: 616rpx;
		// height: 670rpx;
		padding: 50rpx 40rpx;
	}
	.jswz{
		width: 616rpx;
		height: 250rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-btns{
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pop-btns>view{
		width: 236rpx;
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;
	}
	.pop-b-l{
		color: #5c5c5c;
		background-color: #f4f4f4;
	}
	.pop-b-r{
		color: #fff;
		background-color: #00b5bc;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}
	
	
    page{
        background-color: #f8f9fb;
    }
	.us-bg{
		width: 750rpx;
		height: 400rpx;
	}
	.wrapper{
		width: 750rpx;
		padding: 0 30rpx;
		position: absolute;
		top: 55rpx;
		left: 0;
	}
	.info{
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.name{
		font-size: 40rpx;
		color: #000;
		word-break: break-all;
		white-space: pre-line;
	}
	.tel{
		font-size: 26rpx;
		color: #6d6c6c;
	}
	.info-btn{
		font-size: 26rpx;
		color: #00b6bc;
		margin-left: 15rpx;
		padding: 14rpx 24rpx;
		background-color: #fff;
		border-radius: 50rpx;
	}
	.us-1{
		width: 690rpx;
		height: 110rpx;
		margin-bottom: 35rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 45rpx;
	}
	.us-2{
		width: 336rpx;
		height: 157rpx;
	}
	
	.down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 1.5px 1.5px 15px #efefef;
	}
	.item{
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.us-6{
		width: 87rpx;
		height: 87rpx;
		margin-bottom: 15rpx;
	}

</style>
